<script setup>
import { ref } from "vue"
import myBack from '@/components/back.vue'



</script>

<template>
  <div class="login-body">
    <div class="login-content">
      <myBack class="my-back" />
      <div>
        <p>Hello</p>
        <p>欢迎来到AI助手</p>
      </div>

      <van-tabs v-model:active="active" swipeable>
        <van-tab title="快捷登录 ">
          <van-field v-model="username" placeholder="请输入手机号" />
          <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
            <template #button>
              <van-button size="small" type="primary">发送验证码</van-button>
            </template>
          </van-field>
          <van-button type="primary" class="login-btn">登录</van-button>
        </van-tab>
        <van-tab title="账号登录">
          <van-field v-model="username" placeholder="请输入用户名" />
          <van-field v-model="sms" type="password" placeholder="请输入密码"/>
          <van-button class="login-btn" type="primary" @click="showactive">登录{{ $route.query.active }}</van-button>
        </van-tab>
      </van-tabs>


    </div>


  </div>

</template>

<style scoped>

.login-body {
  background-color: #7c1a1a;
  width: 100%;
  height: 844px;
  /* padding: 15px; */


}

.login-btn {
  width: 100%;
}

.login-content {
  width: 100%;
  padding: 15px;
  /* display: flex; */

}

.my-back {
  position: relative;
  z-index: 3;
  height: 0;
}
</style>
